<template>
  <div :style="{height:'100vh',overflowX:'hidden'}" class="index">
    <v-header :items="items"></v-header>
    <Breadcrumb :home="bread.home" :model="bread.items"/>
    <Splitter v-if="show">
      <SplitterPanel :size="60" class="p-d-flex p-ai-center p-jc-center">
        <Splitter layout="vertical">
          <SplitterPanel :size="60" class="p-d-flex p-ai-center p-jc-center">
            <Splitter>
              <SplitterPanel :size="50" class="p-d-flex p-ai-center p-jc-center">
                <Chart :data="c5" :height="500" type="polarArea"/>
              </SplitterPanel>
              <SplitterPanel :size="50" class="p-d-flex p-ai-center p-jc-center">
                <Chart :data="c6" :height="500" type="radar"/>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>
          <SplitterPanel :size="40">
            <Chart :data="c7" :height="100" :options="c7o" type="bar"/>
          </SplitterPanel>
        </Splitter>
      </SplitterPanel>
      <SplitterPanel :size="40">
        <Splitter layout="vertical">
          <SplitterPanel :size="70">
            <Splitter layout="vertical">
              <SplitterPanel :size="50" class="p-d-flex p-ai-center p-jc-center">
                <Chart :data="c2" :width="600" type="bar"/>
              </SplitterPanel>
              <SplitterPanel :size="50" class="p-d-flex p-ai-center p-jc-center">
                <Chart :data="c4" :width="600" type="line"/>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>
          <SplitterPanel :size="30" class="p-d-flex p-ai-center p-jc-center">
            <Splitter>
              <SplitterPanel :size="50" class="p-d-flex p-ai-center p-jc-center">
                <Chart :data="c1" :height="200" type="doughnut"/>
              </SplitterPanel>
              <SplitterPanel :size="50" class="p-d-flex p-ai-center p-jc-center">
                <Chart :data="c3" :height="200" type="pie"/>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>
        </Splitter>
      </SplitterPanel>
    </Splitter>

  </div>
</template>
<script setup>
import service from '@/request.js'
import S from "@/store"
import {onMounted, ref} from 'vue'
import {getDays} from '@/util'
import vHeader from '@/components/header'

const items = []
const bread = {
  home: {icon: 'pi pi-home', to: '/index'},
  items: [
    {label: '财务报表', to: '/charts'}
  ]
}

const c1 = ref({
  labels: ['赚', '平', '亏'],
  datasets: [{
    data: [0, 0, 0],
    backgroundColor: [
      '#42A5F5',
      '#66BB6A',
      '#FFA726'
    ],
    hoverBackgroundColor: [
      '#64B5F6',
      '#81C784',
      '#FFB74D'
    ]
  }]
})
const c2 = ref({
  labels: getDays(),
  datasets: [{
    label: '清库',
    backgroundColor: '#db2a94',
    data: [0, 0, 0, 0, 0, 0, 1]
  },
    {
      label: '入库',
      backgroundColor: '#42A5F5',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      label: '出库',
      backgroundColor: '#FFA726',
      data: [0, 0, 0, 0, 0, 0, 0]
    }]
})
const c3 = ref({
  labels: ['正常', '冗余', '过期', '告急'],
  datasets: [{
    data: [0, 0, 0, 0],
    backgroundColor: [
      '#42A5F5',
      '#66BB6A',
      '#FFA726',
      '#db2a94'
    ],
    hoverBackgroundColor: [
      '#64B5F6',
      '#81C784',
      '#FFB74D',
      '#db2a94'
    ]
  }]
})
const c4 = ref({
  labels: getDays(),
  datasets: [{
    label: '近七天商品总数',
    data: [0, 0, 0, 0, 0, 0, 0],
    fill: false,
    borderColor: '#10ca6a'
  }
  ]
})
const c5 = ref({
  datasets: [{
    data: [],
    backgroundColor: [],
  }],
  labels: []
})
const c6 = ref({
  labels: ['过期', '正常', '盈余'],
  datasets: []
})
const c7 = {
  labels: getDays(),
  datasets: [{
    type: 'line',
    label: '近七天商品总数',
    borderColor: '#1ad95a',
    borderWidth: 2,
    fill: false,
    data: []
  },
    {
      type: 'bar',
      label: '清库',
      backgroundColor: '#db2a94',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      type: 'bar',
      label: '入库',
      backgroundColor: '#42A5F5',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      type: 'bar',
      label: '出库',
      backgroundColor: '#FFA726',
      data: [0, 0, 0, 0, 0, 0, 0]
    }]
}
const c7o = {
  responsive: true,
  title: {
    display: true,
    text: '总览'
  },
  tooltips: {
    mode: 'index',
    intersect: true
  }
}

let show = ref(false)

onMounted(() => {
  Promise.all([
    service.get('commodity/graph/status-count'),
    service.get('commodity/graph/price-count'),
    service.get('commodity/graph/date-commodity-ioc'),
    service.get('commodity/graph/properties'),
    service.get('commodity/counts'),
    service.get('commodity/graph/date-commodity-count')
  ]).then(arr => {
    [_1, _2, _3, _4, _5, _6].forEach((v, j) => v(arr[j]))
    c7.datasets[0].data=arr[5]
    c7.datasets[1].data=arr[2].CLEAN
    c7.datasets[2].data=arr[2].INPUT
    c7.datasets[3].data=arr[2].OUTPUT
    // console.log(c1.value, c2.value, c3.value, c4.value, c5.value, c6.value)
    console.log(c7)
    show.value = true
    S.commit('setLoading', false)
  })
  //饼图
  let _1 = ({name, value}) => {
    c3.value.labels = name
    c3.value.datasets[0].data = value
  }
  // 环图
  let _2 = ({name, value}) => {
    c1.value.labels = name
    c1.value.datasets[0].data = value
  }
  //柱图
  let _3 = (data) => {
    c2.value.datasets[0].data = data.CLEAN
    c2.value.datasets[1].data = data.INPUT
    c2.value.datasets[2].data = data.OUTPUT
  }
  // 雷达图
  let _4 = (data) => {
    Object.keys(data).forEach((v) => {
      if (v === '__total__') return
      c6.value.datasets.push({
        label: v,
        backgroundColor: 'rgba(179,181,198,0.2)',
        borderColor: 'rgba(179,181,198,1)',
        pointBackgroundColor: 'rgba(179,181,198,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(179,181,198,1)',
        data: data[v]
      })
    })
  }
  // 花图
  let _5 = ({name, value}) => {
    c5.value.labels = name
    c5.value.datasets[0].data = value
    let bg = []
    value.forEach((i, j) => {
      bg.push(['#42A5F5', '#66BB6A', '#FFA726', '#26C6DA', '#7E57C2'][j % 5])
    })
    c5.value.datasets[0].backgroundColor = bg
  }
  //线图
  let _6 = (data) => {
    c4.value.datasets[0].data = data
  }
})
</script>
